﻿#loading { position: absolute; width: 180px; margin: -70px 0 0 -90px; height: 140px; top: 50%; left: 50%; }
#loading .title { background: url(/images/loading-title.png) no-repeat; position: absolute; display: block; top: 0; left: 0px; width: 180px; height: 27px; }
#loading .logo { background: url(/images/loading.gif) no-repeat; position: absolute; display: block; top: 25px; left: 22px; width: 120px; height: 120px; }

#starting {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100000;
    background-color: #B4D9F1;
    opacity: 1;
    -webkit-transition: opacity 1s linear;
}
#starting-logo{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
    /*TODO */
    background: url(../images/loading.png);
    -webkit-box-shadow:0 0 1em #4D4D4D;
    -moz-box-shadow:0 0 1em #4D4D4D;
	box-shadow:0 0 1em #4D4D4D;
}
#starting-text{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 80px 0 0 -80px;
    width: 178px;
    height: 50px;
    font-family: Arial,Tahoma,微软雅黑;
    font-size: 20px;
    color: white;
    text-shadow: #666 0 0 3px;
    text-align: center;
    cursor: default;
}
#starting-bar{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 120px 0 0 -51px;
    width: 100px;
    height: 3px;
    overflow: hidden;
    font-size: 0;
    border:1px solid #888;
    background-color: #999;
}
#starting-bar-tag{
    width: 8px;
    height: 100%;
    position:relative;
    left:0px;
    opacity:0;
    background-color: #FFF;
    /* 在这儿我们定义一个动画名，随后我们将会实现它 */
     -moz-animation-name: loading;
     -webkit-animation-name: loading;
     /* 动画循环一次的总时间 */
	 -moz-animation-duration: 4s;
     -webkit-animation-duration: 4s;
     /* 动画的循环次数，设置为无穷大 */
	 -moz-animation-iteration-count: infinite;
     -moz-animation-direction: linear;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: linear;
}
@-moz-keyframes loading{
        /* 在动画开始时每一列的透明度都是0 */
        0%{opacity:0;left:0px;}
        /* 在动画中间时每一列的透明度都是1 */
        50%{opacity:1;left:50%;}
        /*在动画结束时每一列的透明度都还原到0 */
        100%{opacity:0;left:100%;}
}
@-webkit-keyframes loading{
        /* 在动画开始时每一列的透明度都是0 */
        0%{opacity:0;left:0px;}
        /* 在动画中间时每一列的透明度都是1 */
        50%{opacity:1;left:50%;}
        /*在动画结束时每一列的透明度都还原到0 */
        100%{opacity:0;left:100%;}
}